<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">{{title}}</span>
        </div>
        <div id="list">
          <ul id="list_top">
            <li>
              <span class="list_title">年度:</span>
              <vue-datepicker-local v-model="year" format="YYYY" class="datepicker"/>
            </li>
            <li>
              <span class="list_title">产品名称:</span>
              <input type="text" autocomplete="off" v-model="project_name">
            </li>
            <li>
              <span class="list_title">技术领域:</span>
              <div id="area_box">
                <input type="text" readonly @click="lingyuBox" v-model="lingyu" :class="{'error':!lingyuCheck}">
                <i id="xiala_logo"></i>
                <div id="hidden_box" v-if="lingyubox">
                  <ul>
                    <li v-if="lingyu1_ISchoose" @click="hidden_box_choose(1)" :class="{active:lingyu1_ISclick}"><span>{{lingyu1_name}}</span></li>
                    <li v-if="lingyu2_ISchoose" @click="hidden_box_choose(2)" :class="{active:lingyu2_ISclick}"><span>{{lingyu2_name}}</span></li>
                    <li v-if="lingyu3_ISchoose" @click="hidden_box_choose(3)" :class="{active:lingyu3_ISclick}"><span>{{lingyu3_name}}</span></li>
                  </ul>
                  <div v-if="lingyu1_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu1_arr" @click="choose_lingyu1(item.id,index,item.tec_name)" :class="{active:lingyu1_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                  <div v-if="lingyu2_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu2_arr" @click="choose_lingyu2(item.id,index,item.tec_name)" :class="{active:lingyu2_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                  <div v-if="lingyu3_ISclick">
                    <ul class="choose_list">
                      <li v-for="(item, index) in lingyu3_arr" @click="choose_lingyu3(item.id,index,item.tec_name)" :class="{active:lingyu3_ISchoose_ed==index}">{{item.tec_name}}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <span class="list_title">技术来源:</span>
              <select v-model="project_jishulaiyuan">
                <option value="">请选择</option>
                <option :value="item" v-for="item in jishulaiyuan_list">{{item}}</option>
              </select>
            </li>
            <li>
              <span class="list_title">上年度销售额(元):</span>
              <input type="text" autocomplete="off" v-model="project_money">
            </li>
            <li>
              <span class="list_title">是否主要产品:</span>
              <ul class="radioBOX">
                <li @click="toggle_isMain_radio">
                  <i class="inlineBlockIcon radio" :class="{active:isMain_radio}"></i>
                  <span>是</span>
                </li>
                <li @click="toggle_isMain_radio">
                  <i class="inlineBlockIcon radio" :class="{active:!isMain_radio}"></i>
                  <span>否</span>
                </li>
              </ul>
            </li>
            <li>
              <span class="list_title">知识产权编号:</span>
              <input type="text" autocomplete="off" v-model="project_zhishinum">
            </li>
            <li class="file_list">
              <span class="list_title">专利证书(选填):</span>
              <div class="rightbox">
                <div class="filebox">
                  <i class="upload_logo"></i>
                  <span class="upload_text">上传文件</span>
                  <input type="file" @change="upload($event)">
                </div>
                <ul v-if="zhuanli_upload" class="file_upload_list">
                  <li>
                    <p>
                      <i class="inlineBlockIcon file_logo"></i>
                      <span class="file_text" :class="{'file_text_ing':zhuanli_upload_ing}">{{file_zhuanli_name_page}}</span>
                      <span class="del_text" v-if="!zhuanli_upload_ing"  @click="del_file">删除</span>
                    </p>
                    <div class="progress" v-if="zhuanli_upload_ing"><div :style="'width:'+w+'px'"></div></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="file_list">
              <span class="list_title">其他证明材料(选填):</span>
              <div class="rightbox">
                <div class="filebox">
                  <i class="upload_logo"></i>
                  <span class="upload_text">上传文件</span>
                  <input type="file" @change="otherFileUpload($event)" v-if="!otherFile_upload_ing">
                </div>
                <ul v-if="otherFile_upload" class="file_upload_list">
                  <li v-for="(item, index) in otherFileList">
                    <p>
                      <i class="inlineBlockIcon file_logo"></i>
                      <span class="file_text" :class="{'file_text_ing':otherFile_upload_ing&&index==ingINDEX}">{{textEach(item.name,10)}}</span>
                      <span class="del_text" v-if="!(otherFile_upload_ing&&index==ingINDEX)"  @click="del_Otherfile(index)">删除</span>
                    </p>
                    <div class="progress" v-if="otherFile_upload_ing&&index==ingINDEX"><div :style="'width:'+ow+'px'"></div></div>
                  </li>
                </ul>
              </div>
              <i class="inlineBlockIcon wenhao"  @mouseover='hiddenboxISshow' @mouseout="hiddenboxIShidden"></i>
              <div class="hiddenbox" v-if="hiddenbox">
                <p>其他证明材料包括：销售合同、销售发票、用户报告、检测报告
                </p>
              </div>
            </li>
          </ul>
          <ul id="list_bottom">
            <li>
              <span class="list_title">关键技术及主要技术指标:</span>
              <textarea v-model="project_mudi"></textarea>
            </li>
            <li>
              <span class="list_title">同类产品(服务)的竞争优势:</span>
              <textarea v-model="project_jishuchuangxin"></textarea>
            </li>
            <li>
              <span class="list_title">知识产权获得情况及其对产品(服务)在技术上发挥的支持作用:</span>
              <textarea v-model="project_chengguo"></textarea>
            </li>
          </ul>
          <div id="btnbox">
            <button class="add_tankuang_btn" @click="save">保存</button>
            <button class="add_tankuang_btn" @click="cancel">取消</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import lu from '@/assets/public.js'
  import { Toast } from 'mint-ui';
  import VueDatepickerLocal from 'vue-datepicker-local'
  export default {
    name: 'rdManagement_add',
    components: {
      Routers,
      Header,
      VueDatepickerLocal
    },
    data () {
      return {
        id:null,
        title:'添加',
        /*基础资料*/
        year:'',
        project_name:'',
        project_jishulaiyuan:'',
        project_money:'',
        isMain_radio:false,
        project_zhishinum:'',
        /*文件*/
        hiddenbox:false,

        file_zhuanli:'',
        file_zhuanli_name:'',
        file_zhuanli_name_page:'',
        zhuanli_upload:false,
        zhuanli_upload_ing:false,
        progressBar:null,
        w:0,

        otherFileList:[],
        ingINDEX:null,
        otherFile_upload:false,
        otherFile_upload_ing:false,
        of_progressBar:null,
        ow:0,

        /*三个很长的文档*/
        project_mudi:'',
        project_jishuchuangxin:'',
        project_chengguo:'',
        /*技术来源数组*/
        jishulaiyuan_list:[
          '大专院校','地方属科研院校','地方企业技术','引进技术本企业消化创新','国外技术','企业自有技术',' 中央属科研院所'
        ],
        /*技术领域*/
        lingyubox:false,
        lingyuCheck:true,
        lingyu:'',
        lingyuID:0,
        lingyu1_arr:[],
        lingyu2_arr:[],
        lingyu3_arr:[],
        lingyu1_name:'请选择',
        lingyu2_name:'请选择',
        lingyu3_name:'请选择',
        lingyu1_ISchoose:true,/*判断省是否被选择，如果被选择，则tab对应的省的盒子隐藏。跳到下一个市的盒子进行选择*/
        lingyu1_ISclick:true,/*判断省是否被点击，如果被点击，则tab对应的省的盒子显示。*/
        lingyu1_ISchoose_ed:0,/*判断省被选择的省的id，如果已经被选择，给予对应的被选择样式，跳到下一个市的盒子进行选择。*/
        lingyu2_ISchoose:false,
        lingyu2_ISclick:true,
        lingyu2_ISchoose_ed:0,
        lingyu3_ISchoose:false,
        lingyu3_ISclick:true,
        lingyu3_ISchoose_ed:0,
      }
    },
    mounted: function() {
      this.axios.get('/index/get_tecs').then((res)=>{
        if(res.data.code==1){
          let datas = res.data.data
          this.lingyu1_arr = datas
        }else{
          Toast(res.data.msg)
          return
        }
      })
      let id = this.$route.params.id
      if(id){
        this.id = id
        this.title = '查看'
        this.axios.get('/index/show_hpro?id='+id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.year = String(datas.year)
            this.project_name = datas.pro_name
            this.project_jishulaiyuan = datas.tec_source
            this.project_money = datas.last_sale
            this.isMain_radio = datas.is_primary==1?true:false
            this.project_zhishinum = datas.know_sn
            if(datas.letter_patent){
              this.file_zhuanli = datas.letter_patent
              this.file_zhuanli_name = datas.letter_patent_info
              this.file_zhuanli_name_page = lu.textEach(datas.letter_patent_info,9)
              this.zhuanli_upload = true
            }
            if(datas.other_files){
              this.otherFileList = datas.other_files
              this.otherFile_upload = true
            }

            this.project_mudi = datas.pro_imp
            this.project_jishuchuangxin = datas.pro_core
            this.project_chengguo = datas.pro_result

            this.lingyu = datas.tec_id.name
            this.lingyuID = datas.tec_id.id
          }else{
            Toast(res.data.msg)
            return
          }
        })
      }
    },
    methods: {
      textEach (str,n) {
        return lu.textEach(str,n)
      },
      /*技术领域*/
      lingyuBox () {
        this.lingyubox = !this.lingyubox
      },
      /*技术领域选择*/
      hidden_box_choose (boxID) {
        if(boxID==1){
          this.lingyu1_ISclick = true
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = false
        }else if(boxID==2){
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = true
          this.lingyu3_ISclick = false
        }else if(boxID==3){
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = true
        }
      },
      /*选择第一个技术领域*/
      choose_lingyu1 (ID,index,name) {
        this.lingyu1_ISchoose_ed = index
        this.lingyu1_name = name
        this.lingyu2_name = '请选择'
        this.lingyu3_ISclick = false
        this.lingyu3_ISchoose = false
        this.axios.get('/index/get_tecs?tec_id='+ID).then((res)=>{
          this.lingyu2_ISchoose = true
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = true
          this.lingyu2_arr = res.data.data
//          console.log(res.data.data)
        })
      },
      /*选择第二个技术领域*/
      choose_lingyu2 (ID,index,name) {
        this.lingyu2_ISchoose_ed = index
        this.lingyu2_name = name
        this.lingyu3_name = '请选择'
        this.axios.get('/index/get_tecs?tec_id='+ID).then((res)=>{
          this.lingyu3_ISchoose = true
          this.lingyu1_ISclick = false
          this.lingyu2_ISclick = false
          this.lingyu3_ISclick = true
          this.lingyu3_arr = res.data.data
//          this.cityID = cityID
        })
      },
      /*选择第三个技术领域*/
      choose_lingyu3 (ID,index,name) {
        this.lingyu3_name = name
        this.lingyu3_ISchoose_ed = index
        this.lingyuID = ID
        this.lingyubox = false
        let str = lu.textEach(name,11)
        this.lingyu = str
      },
      /*上传文件*/
      upload (e) {
        let file = e.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        let _this = this
        reader.onload = function(e) {
          let str = lu.textEach(file.name,12)
          _this.zhuanli_upload_ing = true
          _this.zhuanli_upload = true
          _this.file_zhuanli_name = file.name
          _this.file_zhuanli_name_page = str
          _this.axios.post('/index/upload_qiniu',{
            code: this.result
          }).then((res)=>{
            if(res.data.code==1){
              _this.w = 200
              clearTimeout(_this.progressBar)
              _this.zhuanli_upload_ing = false
              let strs = lu.textEach(file.name,10)
              _this.file_zhuanli_name_page = strs
              _this.file_zhuanli = res.data.key
              _this.w = 0
            }else{
              Toast(res.data.msg)
              return
            }
          }).catch(function (error) {
            Toast('网络连接超时，请稍后重试！')
            return
          });

          let n = _this.w
          _this.progressBar = setInterval(function(){
            n+=5
            _this.w = n
            if(n>=65){
              clearTimeout(_this.progressBar)
            }
          },150)
        }
      },
      del_file () {
        this.file_zhuanli = ''
        this.file_zhuanli_name = ''
        this.file_zhuanli_name_page = ''
        this.zhuanli_upload = false
      },
      /*上传其他文件*/
      otherFileUpload (e) {
        let file = e.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        let _this = this
        reader.onload = function(e) {
          let str = lu.textEach(file.name,12)
          let obj = {
            name:file.name,
            key:''
          }
          _this.otherFileList.push(obj)
          let index = _this.otherFileList.length-1
          _this.otherFile_upload_ing = true
          _this.otherFile_upload = true
          _this.ingINDEX = index
          _this.axios.post('/index/upload_qiniu',{
            code: this.result
          }).then((res)=>{
            if(res.data.code==1){
              _this.ow = 200
              clearTimeout(_this.of_progressBar)
              _this.otherFile_upload_ing = false
              _this.otherFileList[index]['key'] = res.data.key
              _this.ow = 0
            }else{
              Toast(res.data.msg)
              return
            }
          }).catch(function (error) {
            Toast('网络连接超时，请稍后重试！')
            return
          });
          let n = _this.ow
          _this.of_progressBar = setInterval(function(){
            n+=5
            _this.ow = n
            if(n>=65){
              clearTimeout(_this.of_progressBar)
            }
          },150)
        }
      },
      del_Otherfile (index) {
        this.otherFileList.splice(index,1)
      },
      /*保存信息*/
      save () {
        if(!this.year||!this.project_name||!this.project_money||!this.project_jishulaiyuan||!this.project_zhishinum||!this.project_mudi||!this.project_jishuchuangxin||!this.project_chengguo||!this.lingyuID){
          Toast('内容必须填写完整！！')
          return
        }
        let yearIndex = new Date(this.year).toLocaleDateString().indexOf('/')
        this.year = new Date(this.year).toLocaleDateString().slice(0,yearIndex)
        this.axios.post('/index/save_hpro',{
          id:this.id||'',
          year: this.year,
          pro_name:this.project_name,
          last_sale:this.project_money,
          tec_source:this.project_jishulaiyuan,
          is_primary:this.isMain_radio==true?1:0,
          know_sn:this.project_zhishinum,
          /*文件*/
          letter_patent:this.file_zhuanli,
          letter_patent_info:this.file_zhuanli_name,

          other_files:JSON.stringify(this.otherFileList),

          /*很长的那个文档*/
          pro_imp:this.project_mudi,
          pro_core:this.project_jishuchuangxin,
          pro_result:this.project_chengguo,
          tec_id:this.lingyuID
        }).then((res)=>{
          if(res.data.code==1){
            this.$router.push('/highTechnology')
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      cancel () {
        this.$router.push({
          path: '/highTechnology',
          name: 'highTechnology',
          params: {
            name: 'highTechnology'
          }
        })
      },

      /*控制显影*/
      hiddenboxISshow () {
        this.hiddenbox = !this.hiddenbox
      },
      hiddenboxIShidden(){
        this.hiddenbox = !this.hiddenbox
      },
      toggle_isMain_radio(){
        this.isMain_radio = !this.isMain_radio
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  #list{
    width:800px;
  }
  #list_top{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-top:34px;
    box-sizing: border-box;
  }
  #list_top>li{
    width:400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-bottom:27px;
  }
  #list_top>li.file_list{
    align-items: flex-start;
  }
  #list_top>li.file_list>span{
    padding-top:3px;
  }
  #list_top>li>input{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  .datepicker{
    width: 220px;
  }
  #list_top>li ul.radioBOX{
    display: flex;
    align-items: center;
    width:220px;
    box-sizing: border-box;
  }
  #list_top>li ul.radioBOX>li{
    margin-right:15px;
    cursor: pointer;
  }
  #list_top>li ul.radioBOX i.radio{
    width:14px;
    height:14px;
    display: inline-block;
    background: url("../../assets/img/radio_false.png");
    margin-right:5px;
  }
  #list_top>li ul.radioBOX i.radio.active{
    background: url("../../assets/img/radio_true.png");
  }
  #list_top>li>div.rightbox>.filebox{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  #list_top>li>div.rightbox>.filebox>input{
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    width:100%;
    height:100%;
    opacity: 0;
  }
  #list_top>li>div.rightbox>.filebox i.upload_logo{
    width:22px;
    height:22px;
    background-image: url("../../assets/img/upload.png");
    margin-right:5px;
  }
  ul.file_upload_list>li{
    margin: 5px 0;
  }
  ul.file_upload_list>li>p{
    display: flex;
    align-items: center;
  }
  i.file_logo{
    width:19px;
    height:17px;
    background-image: url("../../assets/img/file.png");
    margin-right:5px;
  }
  #list_top>li>div.rightbox>.filebox span.upload_text{
    color: #888;
    font-size:16px;
  }
  span.file_text{
    color: #333;
    font-size:14px;
  }
  span.file_text_ing{
    color: #888;
    font-size:14px;
  }
  span.del_text{
    color: #4797D4;
    font-size:14px;
    margin-left:5px;
    cursor: pointer;
  }
  #list_top>li>select{
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  .list_title{
    color: #333;
    font-size:16px;
    padding-right:15px;
    display: inline-block;
    width:180px;
    text-align: right;
    box-sizing: border-box;
  }
  #list_bottom>li{
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    justify-content: flex-end;
    margin-bottom:27px;
  }
  #list_bottom textarea{
    width:620px;
    height:146px;
    resize: none;
    box-sizing: border-box;
    border:1px solid #ddd;
    padding:10px;
    margin:0;
    outline: none;
  }
  #btnbox{
    padding-left:180px;
  }
  #btnbox>button:first-child{
    margin-right:32px;
  }
  #area_box{
    position: relative;
    padding:0;
    margin:0;
    width:220px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
  }
  #area_box>input{
    width:100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  #area_box #xiala_logo{
    position: absolute;
    width:15px;
    height:8px;
    right:26px;
    top:50%;
    transform: translateY(-50%);
    background: url("../../assets/img/xiala.png");
  }
  #hidden_box{
    width:600px;
    position: absolute;
    top:30px;
    left:-1px;
    z-index: 5;
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  #hidden_box>ul{
    height:36px;
    border-bottom:1px solid #2377BA;
    display: flex;
    align-items: flex-end;
  }
  #hidden_box>ul>li{
    margin-left:5px;
    padding:0 15px;
    height:30px;
    vertical-align: middle;
    line-height: 30px;
    border-top: 1px solid #2377BA;
    border-left: 1px solid #2377BA;
    border-right: 1px solid #2377BA;
    background-color: #fff;
  }
  #hidden_box>ul>li>span{
    color: #333;
    font-size:15px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    width:100%;
    height:100%;
  }
  #hidden_box>ul>li.active{
    background-color: #2377BA;
  }
  #hidden_box>ul>li.active>span{
    color: #fff;
  }
  .choose_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding:10px;
  }
  .choose_list>li{
    padding:6px 15px;
    white-space: nowrap;
    cursor: pointer;
    color: #333;
    font-size:16px;
    background-color: #fff;
  }
  .choose_list>li.active{
    background-color: #2377BA;
    color: #fff;
  }


  /*问号一系列*/
  .wenhao{
    position: absolute;
    right:-32px;
    top:5px;
    /*transform: translateY(-50%);*/
    width:22px;
    height:22px;
    background: url("img/wenhao.png");
  }
  .hiddenbox{
    position: absolute;
    right:-277px;
    top:-60px;
    display: flex;
  }
  .hiddenbox>p{
    width:235px;
    height:117px;
    background: url("img/kuang.png");
    color: #333;
    font-size:15px;
    padding-left:34px;
    box-sizing: border-box;
    padding-top:17px;
    padding-right:11px;
  }
  /*进度条*/
  div.progress{
    width:100%;
    height:3px;
    background: #f3f3f3;
    border-radius: 2px;
    position: relative;
    margin:10px auto 0;
  }
  div.progress>div{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:20px;
    height:3px;
    background: #4797D4;
  }
</style>
